<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { getHostPage, HostServer } from '../../../api/application'
import HostDialog from '../../device/computer/host_dialog.vue'
import { Search, Plus } from '@element-plus/icons-vue'

const searchForm = reactive({
  username: '',
  page: 1,
  page_size: 10
})

const tableData = ref<HostServer[]>([])
const total = ref(0)

const onSearch = () => {
  getHostPage().then(res => {
    tableData.value = res.list
    total.value = res.total
  })
}
const sonRef = ref<null | any>(null)
const clickShowHostDialog = () => {
  sonRef.value.form.hostName = ''
  sonRef.value.form.ip = ''
  sonRef.value.form.communicationPort = 3389
  sonRef.value.form.domain = ''
  sonRef.value.form.hostAlias = ''
  sonRef.value.form.status = 1
  sonRef.value.form.addType = 1
  sonRef.value.form.id = '0'
  sonRef.value.formTitle = '手工添加应用主机'
  sonRef.value.dialogFormVisible = true
}

const handleUpdate = (row: HostServer) => {
  console.log(row)
}

const handleDelete = (row: HostServer) => {
  console.log(row)
}

onMounted(() => {
  onSearch()
})

</script>
<template>
    <el-card>
      <el-card class="search-card">
        <el-input v-model="searchForm.username" placeholder="请输入主机名称" />
        <el-button type="primary" :icon="Search" @click="onSearch">查询</el-button>
        <el-button type="primary" :icon="Plus" @click="clickShowHostDialog">添加主机</el-button>
      </el-card>

      <el-card class="body-card">
        <el-table :data="tableData" >
          <el-table-column type="index" width="50" />
          <el-table-column prop="hostAlias" label="主机别名"/>
          <el-table-column prop="ip" label="主机IP"/>
          <el-table-column prop="communicationPort" label="通信端口"/>
          <el-table-column prop="domain" label="域"/>
          <el-table-column
            prop="status"
            label="主机状态"
            width="100"
            >
            <template #default="scope">
              <el-tag
                :type="scope.row.status==1 ? 'warning' : 'success'"
                disable-transitions
                >{{ scope.row.status==1?"正常" : "维护" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="add_type"
            label="添加方式"
            width="100"
            >
            <template #default="scope">
              <el-tag
                :type="scope.row.add_type==1 ? 'warning' : 'success'"
                disable-transitions
                >{{ scope.row.add_type==1?"手动添加" : "自动注册" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleUpdate(scope.row)"
                ><el-icon><Edit /></el-icon> 发布应用</el-button
              >
              <el-button
                link
                type="primary"
                @click="handleDelete(scope.row)"
                ><el-icon><Edit /></el-icon> 查看主机</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="total,prev, pager, next" :total="total" />
      </el-card>
    </el-card>
  <HostDialog ref="sonRef"></HostDialog>
</template>

<style lang="scss" scoped>
.search-card{
  .el-card__body{
    .el-input{
      width: 200px;
      margin-right: 10px;
    }
  }
  margin-bottom: 10px;
}
</style>
